<template>
  <div class='page-container'>
    <div class="bg"/>
    <div class="container">
      <div class="block-wrap">
        <div class="block-container">
          <div class="num" :class="[`num${num}`, `len${num.length}`]" v-for="(num, index) in numArr" :key="index" @click="removeNum(index)">{{ num }}</div>
          <div class="operator" :class="[`${opt.name}`]" v-for="(opt, index) in operatorArr" :key="`${opt.name}${index}`" @click="removeOpt(index)">{{opt.label}}</div>
        </div>
      </div>
      <div class="target-wrap">
        <input ref="targetNum" v-model="targetNum" class="target" type="number">
      </div>
      <div class="input-con">
        <van-field
            ref="numInput"
            v-model="inputNum"
            center
            clearable
            input-align="center"
            type="text"
            label="数字："
            :formatter="formatter"
            placeholder="请输入要添加的数字"
            @keyup.enter="addNum"
        >
          <template #button>
            <van-button icon="plus" type="info" @click="addNum">添加</van-button>
          </template>
        </van-field>
      </div>
      <div class="operator-con">
        <div class="operator add" @click="addOpt('add')">+</div>
        <div class="operator sub" @click="addOpt('sub')">-</div>
        <div class="operator mul" @click="addOpt('mul')">x</div>
        <div class="operator div" @click="addOpt('div')">÷</div>
      </div>
      <div class="btn-wrap">
        <van-button type="primary" @click="reset">重置</van-button>
        <van-button type="info" @click="handleCalc">计算</van-button>
      </div>
      <div class="result" v-for="(item, index) in result" :key="index">{{item}}</div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Field, Button } from 'vant';
import DigitalPuzzleSolution from '@/views/shuzi/solution'

Vue.use(Field);
Vue.use(Button);
export default {
  name: 'ShuZi',
  components: {},
  computed: {
    result() {
      if (Array.isArray(window.solutionResult)) {
        let result = [...window.solutionResult]
        return result
      }
      return []
    }
  },
  data() {
    return {
      solution: null,
      targetNum: '',
      inputNum: '',
      numArr: [],
      operatorObj: {
        add: { name: 'add', label: '+', value: '+'},
        sub: { name: 'sub', label: '-', value: '-'},
        mul: { name: 'mul', label: 'x', value: '*'},
        div: { name: 'div', label: '÷', value: '/'},
      },
      operatorArr: []
    }
  },
  created() {
  },
  mounted() {
    this.solution = new DigitalPuzzleSolution('20', '184373682388791')

  },
  beforeDestroy() {
  },
  methods: {
    formatter(value) {
      // 过滤输入的数字
      if (/^\d/g.test(value)) {
        return value.replace(/[^0-9]/g, '');
      }
      if (/^[+-/*//]/g.test(value)) {
        return value.replace(/[^+-/*//]/g, '');
      }
      return value.replace(/[^0-9+-/*//]/g, '');
    },
    addOpt(opt) {
      this.operatorArr.push(this.operatorObj[opt])
    },
    removeOpt(index) {
      this.operatorArr.splice(index,1)
    },
    addNum() {
      if (this.inputNum) {
        if (/\d/g.test(this.inputNum)) {
          this.numArr.push(Number(this.inputNum))
        } else {
          this.inputNum.split('').map(item => {
            Object.keys(this.operatorObj).some(key => {
              if (this.operatorObj[key].value == item) {
                this.operatorArr.push(this.operatorObj[key])
                return true
              }
            })
          })
        }
        this.inputNum = ''
      }
      this.$refs['numInput'].focus()
    },
    removeNum(index) {
      this.numArr.splice(index, 1)
    },
    reset() {
      this.targetNum = ''
      this.numArr = []
      this.operatorArr = []
    },
    handleCalc() {
      let numArr = [...this.numArr]
      let optArr = this.operatorArr.map((item)=> {
        return item.value
      })
      if (this.targetNum) {
        let targetNum = Number(this.targetNum)
        // this.solution.calcSum2(numArr, optArr, targetNum)
        console.log(numArr)
        console.log(optArr)
        console.log(targetNum)
        this.solution.calcSum(numArr, optArr, targetNum)
      } else {
        this.$toast('请输入目标值')
        this.$refs['targetNum'].focus()

      }
    }
  }
}
</script>

<style scoped lang="less">
.page-container {
  min-height: 100vh;
  position: relative;
  .bg {
    width: 750px;
    height: 100vh;
    background: url(./img/bg.png);
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
  }

  .container {
    padding-top: 800px;
    position: absolute;
    top: 0;
    left: 0;

    .block-wrap {
      padding: 66px 40px 0 50px;
      width: 750px;
      height: 800px;
      background-image: url("./img/spr2.png");
      background-size: 1021px 1017px;
      background-position: 0 0;
      position: absolute;
      top: 0;
      left: 0;

      .block-container {
        width: 665px;
        height: 665px;
        background-image: url("./img/spr3.png");
        background-size: 1018px 1023px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;

      }
    }

    .target-wrap {
      margin: 0 auto;
      display: block;
      width: 730px;
      height: 200px;
      text-align: center;
      background-image: url("./img/spr2.png");
      background-size: 1021px 1017px;
      background-position: 0 -800px;
      overflow: hidden;
      .target {
        margin: 20px auto 0;
        display: block;
        width: 150px;
        height: 150px;
        color: #ffffff;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background-color: transparent;
      }
    }

    .input-con {
      /deep/ .van-cell {
        background-color: rgba(74, 124, 184, .5);
        color: #ffffff;
        .van-field__label {
          color: #ffffff;
        }
        .van-cell__value {
          color: #ffffff;
        }
        .van-field__control {
          font-size: 32px;
          color: #ffffff;
          background-color: transparent;
        }
      }
    }

    .operator-con {
      padding: 30px 60px;
      display: flex;
      justify-content: space-around;
    }

    .btn-wrap {
      display: flex;
      justify-content: space-around;
    }
  }



  .num {
    margin-right: 5px;
    margin-bottom: 5px;
    width: 90px;
    height: 90px;
    line-height: 80px;
    text-align: center;
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
    background-image: url("./img/spr.png");
    background-size: 1018px 968px;
    background-position: -38px -850px;
    overflow: hidden;
    &.num1 {
      background-position: -224px -756px;
    }
    &.num2 {
      background-position: -38px -756px;
    }
    &.num3 {
      background-position: -130px -727px;
    }
    &.num4 {
      background-position: -519px -630px;
    }
    &.num5 {
      background-position: -130px -820px;
    }
    &.num6 {
      background-position: -426px -608px;
    }
    &.num7 {
      background-position: -525px -390px;
    }
    &.num8 {
      background-position: -519px -538px;
    }
    &.num9 {
      background-position: -426px -700px;
    }
  }

  .operator {
    margin-right: 5px;
    margin-bottom: 5px;
    width: 90px;
    height: 90px;
    line-height: 80px;
    text-align: center;
    color: #ffffff;
    font-size: 36px;
    font-weight: bold;
    background-image: url("./img/spr.png");
    background-size: 1018px 968px;
    background-position: -612px -645px;
    &.div, &.mul {
      background-position: -316px -758px;
    }
  }
}
</style>
